<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //模拟提示框
        //移入div1出现div2,再移入div2后2不会消失,再移入div1也不会消失,光标都不在这2个div后消失
        //分3步
        //1.制作这2个div
        //2.添加鼠标移入/出事件
        //3.完善延迟逻辑
        window.onload = function () {
            let oDiv1 = document.getElementById('div1');
            let oDiv2 = document.getElementById('div2');
            let timer = null;

            //移入div1时,div2显示
            oDiv1.onmouseenter = function () {
                if (timer != null) clearTimeout(timer); //取消div2移出的定时器
                show();
            } ;

            //移出div1后,div2延迟消失
            oDiv1.onmouseleave = function () {
                timer = setTimeout(hidden,500);
            } ;

            //移入div2后,取消div1的延迟消失效果
            oDiv2.onmouseenter = function () {
                clearTimeout(timer);
            };

            //移出div2后,延迟消失div2
            oDiv2.onmouseleave = function () {
                timer = setTimeout(hidden,500)
                //但如果此时又移入div1,会取消div1触发的show,因此需要在div1中添加取消div2的定时器
            };

            function show() {
                oDiv2.style.display = 'block';
            }

            function hidden() {
                oDiv2.style.display = 'none';
            }
        };

        //也可以 oDiv2.onmouseleave = oDiv2.onmouseleave = function... 连等的方式来简化代码



    </script>

    <style>
        /* 向左浮动,设置边距 */
        div {
            float: left;
            margin: 10px;
        }

        #div1{
            background: brown;
            width: 200px;
            height: 80px;
        }

        #div2{
            background: cadetblue;
            width: 300px;
            height: 300px;
            display: none;
        }
    </style>
</head>

<body>

<div>
    <div id="div1"></div>
    <div id="div2"></div>

</div>

</body>
</html>